<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="false"
    @scroll="scroll"
    :refresher-enabled="true"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> {{ title }} </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col p-4">
      <u-parse :html="dataList[0]?.content"></u-parse>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        type: '',
        title: ''
      }
    },
    onLoad(options) {
      this.type = options.type
      setTimeout(() => {
        this.$refs.paging.reload()
      }, 1)
    },
    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        const typeConfig = {
          1: { code: 'user_agreement', title: '用户协议' }, // 用户协议
          2: { code: 'privacy_policy', title: '隐私政策' }, // 隐私政策
          3: { code: 'buy_agreement', title: '购买协议' }, // 购买协议
          4: { code: 'safe', title: '安全提示' } // 安全提示
        }

        const config = typeConfig[this.type] || { code: 'user_agreement', title: '用户协议' }
        this.title = config.title
        let res = await api.getArticleDetail({ code: config.code })
        this.$refs.paging.complete(
          res.data?.content
            ? [
                {
                  content: res.data.content
                }
              ]
            : []
        )
      }
    }
  }
</script>

<style lang="scss" scoped></style>
